<template>
	<view class="home_content">
		<navBar source="index"></navBar>
		<view class="restaurant_info_box">
			<view class="restaurant_info">
				<view class="left_info">
					<view class="title">
						{{tableInfo.storeName || ''}}
					</view>
					<view class="position">
						{{tableInfo.tableName || ''}}
					</view>
				</view>
				<view class="restaurant_logo">
					<image class="restaurant_logo_img" :src="tableInfo.brandLogo"></image>
				</view>
			</view>
		</view>
		<view class="restaurant_menu_list">
			<scroll-view class="type_list" scroll-y="true" scroll-top="0rpx" v-if="typeListData.length > 0 ">
				<view class="type_item" :class="{active: typeIndex == index}" v-for="(item, index) in typeListData" :key="index" @click="getDishListDataes(item, index)">
					{{ item.name }} 
				</view>
				<view class="seize_seat"></view>
			</scroll-view>
			<scroll-view class="vegetable_order_list" scroll-y="true" scroll-top="0rpx" v-if="dishListItems && dishListItems.length >0">
				<view class="type_item"  v-for="(item, index) in dishListItems" :key="index" >
					<view class="dish_img" @click="openDetailHandle(item)">
						<image :src="item.imageUrl" class="dish_img_url" mode=""></image>
					</view>
					<view class="dish_info">
						<view class="dish_name" @click="openDetailHandle(item)"> {{ item.dishName }} </view>
						<view class="dish_label" @click="openDetailHandle(item)"> {{ item.desc || item.dishName }} </view>
						<!-- <view class="dish_num"> {{ item.dishName }} </view> -->
						<view class="dish_price"> <text class="ico">￥</text> {{ item.price / 100 }} </view>
						<view class="dish_active" v-if="Array.isArray(item.flavorList) && item.flavorList.length == 0 || item.dishNumber > 0">
							<image v-if="item.dishNumber > 0" src="../../static/btn_red.png"  @click="redDishAction(item)" class="dish_red" mode=""></image>
							<text v-if="item.dishNumber > 0" class="dish_number">{{item.dishNumber}}</text>
							<image src="../../static/btn_add.png" class="dish_add" @click="addDishAction(item)" mode=""></image>
						</view>
						<view class="dish_active" v-else>
							<view class="check_but" @click="moreNormDataesHandle(item)"> 选规格 </view>
						</view>
					</view>
				</view>
				<view class="seize_seat"></view>
			</scroll-view >
			<view class="no_dish" v-else>
				该分类下暂无菜品！
			</view>	
		</view>
		<view class="footer_order_buttom" v-if="orderListData().dishList.length == 0">
			<view class="order_number" @click="() => openOrderCartList = false">
				<image src="../../static/btn_waiter_nor.png" class="order_number_icon" mode=""></image>
			</view>
			<view class="order_price">
				 <text class="ico">￥</text> 0
			</view>
			<view class="order_but" >
				去结算
			</view>
		</view>
		<view class="footer_order_buttom order_form" v-else>
			<view class="order_number" @click="() => openOrderCartList = !openOrderCartList">
				<image src="../../static/btn_waiter_sel.png" class="order_number_icon" mode=""></image>
				<view class="order_dish_num"> {{orderDishNumber}} </view>
			</view>
			<view class="order_price">
				 <text class="ico">￥ </text> {{orderDishPrice / 100}}
			</view>
			<view class="order_but" @click="goOrder()">
				去结算
			</view>
		</view>
		<!-- 餐桌已被预定弹窗 - start -->
		<view class="pop_mask " v-show="reservedState" style="z-index: 9999;">
			<view class="reserved_pop">
				<view class="reserved_state">
					<view class="cont_icon">
						<image class="cont_icon_img" src="../../static/lockTab.png" mode=""></image>
					</view>
					<view class="cont_tit">
						{{showInfo.title}}
					</view>
					<view class="cont_desc">
						{{showInfo.desc}}
					</view>
				</view>
				<view class="butList">
					<navigator open-type='exit' class="define"  target='miniProgram'>
						{{showInfo.but}}
						<!-- <view class="define" @click="closeMask()"> 知道了 </view> -->
					</navigator>
					<!-- <view class="define" @click="closeMask()"> 知道了 </view> -->
				</view>
			</view>
		</view>
		<!-- 餐桌已被预定弹窗 - end -->
		<!-- 开桌弹框 - start -->
		<view class="pop_mask " v-show="openTablePop" style="z-index: 99999;">
			<view class="pop">
				<view class="open_table_cont">
					<view class="cont_tit">
						就餐人数
					</view>
					<view class="people_num_act">
						<image src="../../static/btn_red.png" class="red" @click="setOpenTableNumber('red')" mode=""></image>
						<text class="people_num"> {{ openTablePeoPleNumber }} </text>
						<image src="../../static/btn_add.png" class="add" @click="setOpenTableNumber('add')" mode=""></image>
					</view>
				</view>
				<view class="butList">
					<view class="define" @click="openTableHandle()"> 确定 </view>
				</view>
			</view>
		</view>
		<!-- 开桌弹框 - end -->
		<!-- 多规格 - start -->
		<view class="pop_mask " v-show="openMoreNormPop">
			<view class="more_norm_pop">
				<view class="title">
					{{moreNormDishdata.dishName}}
				</view>
				<view class="items_cont">
					<view class="item_row" v-for="(obj, index) in moreNormdata" :key="index">
						<view :class="{item: true, act: flavorDataes.findIndex(it => item === it) != -1}" v-for="(item, ind) in obj.flavorData" :key="ind" @click="checkMoreNormPop(obj.flavorData,item)">
							{{item}}
						</view>
					</view>
				</view>
				<view class="but_item">
					<view class="price">
						 <text class="ico"> ￥ </text> {{moreNormDishdata.price / 100}}
					</view>
					<view class="active" v-if="moreNormDishdata.dishNumber && moreNormDishdata.dishNumber > 0">
						<image src="../../static/btn_red.png"  @click="redDishAction(moreNormDishdata)" class="dish_red" mode=""></image>
						<text class="dish_number">{{moreNormDishdata.dishNumber}}</text>
						<image src="../../static/btn_add.png" class="dish_add" @click="addDishAction(moreNormDishdata)" mode=""></image>
					</view>
					<view class="active" v-else-if="moreNormDishdata.dishNumber == 0">
						<view class="dish_card_add" @click="addDishAction(moreNormDishdata)"> 加入购物车 </view>
					</view>
				</view>
				<view class="close" @click="closeMoreNorm(moreNormDishdata)">
					<image class="close_img" src="../../static/but_close.png" mode=""></image>
				</view>
			</view>
		</view>
		<!-- 多规格 - end -->
		<!-- 菜品详情 - start -->
		<view class="pop_mask " v-show="openDetailPop" style="z-index: 9999;" >
			<view class="dish_detail_pop" v-if="dishDetailes.type == 1">
				<image class="div_big_image" :src="dishDetailes.imageUrl" mode=""></image>
				<view class="title">
					{{dishDetailes.dishName}}
				</view>
				<view class="desc">
					{{dishDetailes.desc}}
				</view>
				<view class="but_item">
					<view class="price">
						 <text class="ico"> ￥ </text> {{dishDetailes.price / 100}}
					</view>
					<view class="active" v-if="dishDetailes.dishNumber && dishDetailes.dishNumber > 0">
						<image src="../../static/btn_red.png"  @click="redDishAction(dishDetailes)" class="dish_red" mode=""></image>
						<text class="dish_number">{{dishDetailes.dishNumber}}</text>
						<image src="../../static/btn_add.png" class="dish_add" @click="addDishAction(dishDetailes)" mode=""></image>
					</view>
					<view class="active" v-else-if="dishDetailes.dishNumber == 0">
						<view class="dish_card_add" v-if="Array.isArray(dishDetailes.flavorList) && dishDetailes.flavorList.length == 0 || dishDetailes.dishNumber > 0" @click="addDishAction(dishDetailes)"> 加入购物车 </view>
						<view class="dish_card_add" v-else @click="detailCheckNorm(dishDetailes)"> 选规格 </view>
					</view>
				</view>
				<view class="close" @click="() => openDetailPop = false">
					<image class="close_img" src="../../static/but_close.png" mode=""></image>
				</view>
			</view>
			<view class="dish_detail_pop" v-else>
				<scroll-view class="dish_items" scroll-y="true" scroll-top="0rpx">
					<view class="dish_title">{{dishDetailes.dishName}}</view>
					<view class="dish_item" v-for="(item, index) in dishMealData" :key="index">
						<image class="div_big_image" :src="item.imageUrl" mode=""></image>
						<view class="title">
							<view class="name">
								{{item.dishName}} 
							</view> 
							<view class="priceInfo">
								<text class="ico">￥</text><text class="pri">{{item.price / 100}}</text> x {{item.dishNumber}}
							</view>
							
						</view>
						<view class="desc">
							{{item.desc}}
						</view>
					</view>
				</scroll-view>
				<view class="but_item">
					<view class="price">
						 <text class="ico"> ￥ </text> {{dishDetailes.price}}
					</view>
					<view class="active" v-if="dishDetailes.dishNumber && dishDetailes.dishNumber > 0">
						<image src="../../static/btn_red.png"  @click="redDishAction(dishDetailes)" class="dish_red" mode=""></image>
						<text class="dish_number">{{dishDetailes.dishNumber}}</text>
						<image src="../../static/btn_add.png" class="dish_add" @click="addDishAction(dishDetailes)" mode=""></image>
					</view>
					<view class="active" v-else-if="dishDetailes.dishNumber == 0">
						<view class="dish_card_add" @click="addDishAction(dishDetailes)"> 加入购物车 </view>
					</view>
				</view>
				<view class="close" @click="() => openDetailPop = false">
					<image class="close_img" src="../../static/but_close.png" mode=""></image>
				</view>
			</view>
		</view>
		<!-- 菜品详情 - end -->
		<!-- 购物车弹框 - start -->
		<view class="pop_mask " v-show="openOrderCartList"  >
			<view class="cart_pop" >
				<view class="top_title">
					<view class="tit"> 购物车 </view>
					<view class="clear" @click="clearCardOrder()"> 
					<image class="clear_icon" src="../../static/clear.png" mode=""></image> 
						<text>清空 </text>	
					</view>
				</view>
				<scroll-view class="card_order_list" scroll-y="true" scroll-top="40rpx">
					<view class="type_item_cont"  v-for="(item, ind) in orderAndUserInfo" :key="ind">
						<view class="user_info">
							<view class="user_avatar">
								<image class="user_avatar_icon" :src="item.avatarUrl" mode=""></image>
							</view>
							<view class="user_name">{{item.nickName}}</view>
						</view>
						<view class="type_item"  v-for="(obj, index) in item.dishList" :key="index">
							<view class="dish_img">
								<image :src="obj.imageUrl" class="dish_img_url" mode=""></image>
							</view>
							<view class="dish_info">
								<view class="dish_name"> {{ obj.name }} </view>
								<view class="dish_price"> <text class="ico">￥</text> {{ obj.price / 100 }} </view>
								<view class="dish_active">
									<image v-if="obj.number && obj.number > 0" src="../../static/btn_red.png"  @click="redDishAction(obj)" class="dish_red" mode=""></image>
									<text v-if="obj.number && obj.number > 0" class="dish_number">{{obj.number}}</text>
									<image src="../../static/btn_add.png" class="dish_add" @click="addDishAction(obj)" mode=""></image>
								</view>
							</view>
						</view>
					</view>
					<view class="seize_seat"></view>
				</scroll-view >
			</view>
		</view>
		<!-- 购物车弹框 - end -->
		<!-- lodding - start -->
		<view class="pop_mask" v-show="loaddingSt" style="z-index: 99999;">
			<view class="lodding">
				<image class="lodding_ico" src="../../static/lodding.gif" mode=""></image>
			</view>
		</view>
		<!-- lodding - start -->
	</view>
</template>
<script src="./index.js"></script>
<style src="./style.scss" lang="scss" scoped></style>
